<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="zh"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="zh"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>ECharts 实现地图散点图（下） </title>
<meta name="description" content="作为国内良心开源软件的主页君，我们以后会为大家带来更多 ECharts 优质教程！本期，主页君邀请到了百度 EFE 美女前端工程师王说，为我们介绍如何在地图散点图。如果看得跃跃欲试，文末还有小作业，跟着主页君一起学 ECharts 吧！">
<meta name="keywords" content="地图, 教程">



<!-- Open Graph -->
<meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="og:title" content="ECharts 实现地图散点图（下）">
<meta property="og:description" content="作为国内良心开源软件的主页君，我们以后会为大家带来更多 ECharts 优质教程！本期，主页君邀请到了百度 EFE 美女前端工程师王说，为我们介绍如何在地图散点图。如果看得跃跃欲试，文末还有小作业，跟着主页君一起学 ECharts 吧！">
<meta property="og:url" content="http://echarts.baidu.com/blog/2016/06/13/echarts-map-tutorial.html">
<meta property="og:site_name" content="">





<link rel="canonical" href="http://echarts.baidu.com/blog/2016/06/13/echarts-map-tutorial.html">
<link href="http://echarts.baidu.com/blog/feed.xml" type="application/atom+xml" rel="alternate" title=" Feed">

<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- For all browsers -->
<link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="http://echarts.baidu.com/blog/assets/css/main.css">

<meta http-equiv="cleartype" content="on">

<!-- Load Modernizr -->
<script src="http://echarts.baidu.com/blog/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>

<!-- Icons -->
<!-- 16x16 -->
<link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.ico">
<!-- 32x32 -->
<link rel="shortcut icon" href="http://echarts.baidu.com/blog/favicon.png">
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
<link rel="apple-touch-icon-precomposed" href="http://echarts.baidu.com/blog/images/apple-touch-icon-precomposed.png">
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://echarts.baidu.com/blog/images/apple-touch-icon-72x72-precomposed.png">
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://echarts.baidu.com/blog/images/apple-touch-icon-114x114-precomposed.png">
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://echarts.baidu.com/blog/images/apple-touch-icon-144x144-precomposed.png">

</head>

<body id="post" class="feature">

<!--[if lt IE 9]><div class="upgrade"><strong><a href="http://whatbrowser.org/">Your browser is quite old!</strong> Why not upgrade to a different browser to better enjoy this site?</a></div><![endif]-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="http://echarts.baidu.com/index.html" class="navbar-brand">
                <img src="http://echarts.baidu.com/images/logo.png" alt="echarts logo" class="navbar-logo">
            </a>
        </div>
        <div id="navbar-collapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li id="nav-index"><a href="http://echarts.baidu.com/index.html">首页</a></li>
                <li id="nav-doc" class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/feature.html">特性</a></li>
                        <li><a href="http://echarts.baidu.com/tutorial.html">教程</a></li>
                        <li><a href="http://echarts.baidu.com/api.html">API</a></li>
                        <li><a href="http://echarts.baidu.com/option.html">配置项手册</a></li>
                        <li><a href="http://echarts.baidu.com/faq.html">常见问题</a></li>
                        <li><a href="http://echarts.baidu.com/changelog.html">版本记录</a></li>
                    </ul>
                </li>
                <li id="nav-download" class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/download.html">下载</a></li>
                        <li><a href="http://echarts.baidu.com/download-theme.html">主题下载</a></li>
                        <li><a href="http://echarts.baidu.com/download-map.html">地图下载</a></li>
                        <li><a href="http://echarts.baidu.com/download-extension.html">扩展下载</a></li>
                    </ul>
                </li>
                <li id="nav-examples">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/examples.html">官方实例</a></li>
                        <li><a href="http://gallery.echartsjs.com/explore.html#tags=echarts-gl">GL 实例</a></li>
                    </ul>
                </li>
                <li id="nav-community" class="active">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://gallery.echartsjs.com">GALLERY</a></li>
                        <li><a href="http://echarts.baidu.com/blog">博客</a></li>
                    </ul>
                </li>
                <li id="nav-tool">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/spreadsheet.html">表格工具</a></li>
                        <li><a href="http://ecomfe.github.io/echarts-map-tool/">地图数据在线工具</a></li>
                        <li><a href="http://echarts.baidu.com/theme-builder/">主题构建工具</a></li>
                    </ul>
                </li>
                <li id="nav-about"><a href="http://echarts.baidu.com/about.html">关于</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="http://echarts.baidu.com/images/github.png" width="18"></a></li>
                <li id="nav-2" class="0"><a href="http://echarts.baidu.com/echarts2/">2.0</a></li>
                <li id="nav-homeen"><a href="https://ecomfe.github.io/echarts-doc/public/en/index.html">EN</a></li>
            </ul>
        </div>
    </div>
</nav>



<div class="entry-header">
  
  <div class="entry-image">
    <img src="http://echarts.baidu.com/blog/images/post/2016-06-13-bmap-4.png" alt="ECharts 实现地图散点图（下）">
  </div><!-- /.entry-image -->
</div><!-- /.entry-header -->


<div id="post-main" role="main">
  <article class="hentry">
    <header class="header-title">
      <div class="header-title-wrap">
        <h1 class="entry-title">ECharts 实现地图散点图（下）</h1>
        <h2><span class="entry-date date published"><time datetime="2016-06-13T00:00:00+08:00">2016-06-13</time></span></h2>
        
      </div><!-- /.header-title-wrap -->
    </header>
    <div class="entry-content">
      <p>上一篇我们介绍了如何使用 ehcarts 内置地图实现地图上绘制的散点图，这篇中，我们将讲解如何在百度地图上绘制散点图。</p>

<h2 id="一初始准备">一、初始准备</h2>

<p>首先要创建 html 和引入 ECharts 包，具体说明详见上篇：<a href="http://echarts.baidu.com/blog/2016/04/28/echarts-map-tutorial.html">ECharts 实现地图散点图（一）</a>。</p>

<h2 id="二引入echarts百度地图扩展包">二、引入echarts百度地图扩展包</h2>

<p>在 <a href="https://github.com/ecomfe/echarts/tree/master/extension/bmap">github</a> 上下载 ECharts 扩展 bmap.js，放在 /extension/ 目录下，并引入 html 中：</p>

<div class="language-html highlighter-rouge"><pre class="highlight"><code>	<span class="cp">&lt;!DOCTYPE html&gt;</span>
	<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;head&gt;</span>
	<span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;title&gt;</span>ECharts map Demo<span class="nt">&lt;/title&gt;</span>
	<span class="nt">&lt;/head&gt;</span>
	<span class="nt">&lt;body&gt;</span>
		<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"map-wrap"</span> <span class="na">style=</span><span class="s">"height: 500px;"</span><span class="nt">&gt;</span>
			<span class="c">&lt;!-- 这里以后是地图 --&gt;</span>
		<span class="nt">&lt;/div&gt;</span>
	<span class="nt">&lt;/body&gt;</span>
	<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"/dep/echarts.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>

	<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"/extension/bmap.js"</span><span class="nt">&gt;&lt;/script&gt;</span>

	<span class="nt">&lt;/html&gt;</span>


</code></pre>
</div>

<h2 id="三绘制地图">三、绘制地图</h2>

<p>1.在 js 中，新建 ECharts 示例，并为其设置配置项 option：</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">bmapChart</span> <span class="o">=</span> <span class="nx">echarts</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'map-wrap'</span><span class="p">));</span>

<span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span>
	<span class="c1">// 这里是 ECharts 的配置项，接下来会说明</span>
<span class="p">}</span>

<span class="nx">bmapChart</span><span class="p">.</span><span class="nx">setOption</span><span class="p">(</span><span class="nx">option</span><span class="p">);</span>


</code></pre>
</div>

<p>2.添加百度地图：</p>

<p>在 option 中添加 bmap 相关设置：</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span>
	<span class="na">bmap</span><span class="p">:</span> <span class="p">{</span>
      	<span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="mf">116.307698</span><span class="p">,</span> <span class="mf">40.056975</span><span class="p">],</span> <span class="c1">// 中心位置坐标</span>
      	<span class="na">zoom</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span> <span class="c1">// 地图缩放比例</span>
      	<span class="na">roam</span><span class="p">:</span> <span class="kc">true</span> <span class="c1">// 开启用户缩放</span>
  	<span class="p">}</span>

<span class="p">}</span>

</code></pre>
</div>

<p>ECharts 将百度地图部分配置集成在了 bmap 中，包括：</p>

<table>
  <thead>
    <tr>
      <th>参数</th>
      <th>说明</th>
      <th>格式</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>center</td>
      <td>中心点的百度坐标</td>
      <td>坐标数组, 如：[116.307698, 40.056975]</td>
    </tr>
    <tr>
      <td>zoom</td>
      <td>初始缩放比</td>
      <td>number</td>
    </tr>
    <tr>
      <td>roam</td>
      <td>是否允许用户缩放操作</td>
      <td>boolean</td>
    </tr>
    <tr>
      <td>mapStyle</td>
      <td>地图自定义样式</td>
      <td>object, 如：{ styleJson: […] }</td>
    </tr>
  </tbody>
</table>

<p>这样百度地图就加载到页面中了，这里显示百度地图的默认样式，稍后第四部分将为百度地图添加自定义样式的配置：</p>

<p><img src="http://echarts.baidu.com/blog/images/post/2016-06-13-bmap-1.png" alt="百度地图1" /></p>

<h2 id="四绘制散点图">四、绘制散点图</h2>

<p>绘制散点图的方法与上篇中绘制散点图方法相同，需要修改的部分是，将散点图的坐标系 <code class="highlighter-rouge">coordinateSystem</code> 改成使用 bmap</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">myData</span> <span class="o">=</span> <span class="p">[</span>

	<span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="s1">'海门'</span><span class="p">,</span> <span class="na">value</span><span class="p">:</span> <span class="p">[</span><span class="mf">121.15</span><span class="p">,</span> <span class="mf">31.89</span><span class="p">,</span> <span class="mi">90</span><span class="p">]},</span>
  	<span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="s1">'鄂尔多斯'</span><span class="p">,</span> <span class="na">value</span><span class="p">:</span> <span class="p">[</span><span class="mf">109.781327</span><span class="p">,</span> <span class="mf">39.608266</span><span class="p">,</span> <span class="mi">120</span><span class="p">]},</span>
  	<span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="s1">'招远'</span><span class="p">,</span> <span class="na">value</span><span class="p">:</span> <span class="p">[</span><span class="mf">120.38</span><span class="p">,</span> <span class="mf">37.35</span><span class="p">,</span> <span class="mi">142</span><span class="p">]},</span>
    <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="s1">'舟山'</span><span class="p">,</span> <span class="na">value</span><span class="p">:</span> <span class="p">[</span><span class="mf">122.207216</span><span class="p">,</span> <span class="mf">29.985295</span><span class="p">,</span> <span class="mi">123</span><span class="p">]},</span>
  	<span class="p">...</span>
<span class="p">]</span>


<span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span>
	<span class="na">bmap</span><span class="p">:</span> <span class="p">{</span>
      	<span class="p">...</span>
  	<span class="p">},</span>
  	<span class="na">visualMap</span><span class="p">:</span> <span class="p">{</span>	<span class="c1">// 视觉映射组件</span>
		<span class="na">type</span><span class="p">:</span> <span class="s1">'continuous'</span><span class="p">,</span>
		<span class="na">min</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
		<span class="na">max</span><span class="p">:</span> <span class="mi">200</span><span class="p">,</span>
		<span class="na">calculable</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
		<span class="na">inRange</span><span class="p">:</span> <span class="p">{</span>
             	<span class="na">color</span><span class="p">:</span> <span class="p">[</span><span class="s1">'#50a3ba'</span><span class="p">,</span><span class="s1">'#eac736'</span><span class="p">,</span><span class="s1">'#d94e5d'</span><span class="p">]</span>
          <span class="p">},</span>
		<span class="na">textStyle</span><span class="p">:</span> <span class="p">{</span>
			<span class="na">color</span><span class="p">:</span> <span class="s1">'#fff'</span>
		<span class="p">}</span>
     	<span class="p">}</span>
	<span class="nl">series</span><span class="p">:</span> <span class="p">[</span>
		<span class="p">{</span>
			<span class="na">name</span><span class="p">:</span> <span class="s1">'销量'</span><span class="p">,</span>
			<span class="na">type</span><span class="p">:</span> <span class="s1">'scatter'</span><span class="p">,</span>

			<span class="na">coordinateSystem</span><span class="p">:</span> <span class="s1">'bmap'</span><span class="p">,</span> <span class="c1">// 坐标系使用bmap</span>

			<span class="na">data</span><span class="p">:</span> <span class="nx">myData</span>
		<span class="p">}</span>
	<span class="p">]</span>
<span class="p">}</span>

</code></pre>
</div>

<p>绘制散点后的百度地图：</p>

<p><img src="http://echarts.baidu.com/blog/images/post/2016-06-13-bmap-2.png" alt="百度地图2" /></p>

<h2 id="四-自定义百度地图样式">四、	自定义百度地图样式</h2>

<p>地图的样式配置 <code class="highlighter-rouge">bmap.mapStyle</code> 中 <code class="highlighter-rouge">styleJson</code> 与百度地图内置的样式配置一致，具体参考百度地图API开发指南中 <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom">定制个性地图</a> 章节的介绍。</p>

<p>这里我们设置一个较暗色调的地图,如下：</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">option</span> <span class="o">=</span> <span class="p">{</span>
		<span class="na">bmap</span><span class="p">:</span> <span class="p">{</span>
      		<span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="mf">116.307698</span><span class="p">,</span> <span class="mf">40.056975</span><span class="p">],</span>
         		<span class="na">zoom</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span>

     	    	<span class="na">roam</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// 允许缩放</span>

     	    	<span class="na">mapStyle</span><span class="p">:</span> <span class="p">{</span>  <span class="c1">// 百度地图自定义样式</span>
     	    		<span class="na">styleJson</span><span class="p">:</span> <span class="p">[</span>
     	    			<span class="c1">// 陆地</span>
                 		<span class="p">{</span>
						<span class="s2">"featureType"</span><span class="p">:</span> <span class="s2">"land"</span><span class="p">,</span>
                          <span class="s2">"elementType"</span><span class="p">:</span> <span class="s2">"all"</span><span class="p">,</span>
                          <span class="s2">"stylers"</span><span class="p">:</span> <span class="p">{</span>
                              <span class="s2">"color"</span><span class="p">:</span> <span class="s2">"#073763"</span>
                          <span class="p">}</span>
                      <span class="p">},</span>
                      <span class="c1">// 水系</span>
                      <span class="p">{</span>
                          <span class="s2">"featureType"</span><span class="p">:</span> <span class="s2">"water"</span><span class="p">,</span>
                          <span class="s2">"elementType"</span><span class="p">:</span> <span class="s2">"all"</span><span class="p">,</span>
                          <span class="s2">"stylers"</span><span class="p">:</span> <span class="p">{</span>
                              <span class="s2">"color"</span><span class="p">:</span> <span class="s2">"#073763"</span><span class="p">,</span>
                              <span class="s2">"lightness"</span><span class="p">:</span> <span class="o">-</span><span class="mi">54</span>
                          <span class="p">}</span>
                      <span class="p">},</span>
                      <span class="c1">// 国道与高速</span>
                      <span class="p">{</span>
                          <span class="s2">"featureType"</span><span class="p">:</span> <span class="s2">"highway"</span><span class="p">,</span>
                          <span class="s2">"elementType"</span><span class="p">:</span> <span class="s2">"all"</span><span class="p">,</span>
                          <span class="s2">"stylers"</span><span class="p">:</span> <span class="p">{</span>
                              <span class="s2">"color"</span><span class="p">:</span> <span class="s2">"#45818e"</span>
                          <span class="p">}</span>
                      <span class="p">},</span>
                      <span class="c1">// 边界线</span>
                      <span class="p">{</span>
                          <span class="s2">"featureType"</span><span class="p">:</span> <span class="s2">"boundary"</span><span class="p">,</span>
                          <span class="s2">"elementType"</span><span class="p">:</span> <span class="s2">"all"</span><span class="p">,</span>
                          <span class="s2">"stylers"</span><span class="p">:</span> <span class="p">{</span>
                              <span class="s2">"color"</span><span class="p">:</span> <span class="s2">"#ffffff"</span><span class="p">,</span>
                              <span class="s2">"lightness"</span><span class="p">:</span> <span class="o">-</span><span class="mi">62</span><span class="p">,</span>
                              <span class="s2">"visibility"</span><span class="p">:</span> <span class="s2">"on"</span>
                          <span class="p">}</span>
                      <span class="p">},</span>
                      <span class="c1">// 行政标注</span>
                      <span class="p">{</span>
                          <span class="s2">"featureType"</span><span class="p">:</span> <span class="s2">"label"</span><span class="p">,</span>
                          <span class="s2">"elementType"</span><span class="p">:</span> <span class="s2">"labels.text.fill"</span><span class="p">,</span>
                          <span class="s2">"stylers"</span><span class="p">:</span> <span class="p">{</span>
                              <span class="s2">"color"</span><span class="p">:</span> <span class="s2">"#ffffff"</span><span class="p">,</span>
                              <span class="s2">"visibility"</span><span class="p">:</span> <span class="s2">"on"</span>
                          <span class="p">}</span>
                      <span class="p">},</span>
                      <span class="p">{</span>
                          <span class="s2">"featureType"</span><span class="p">:</span> <span class="s2">"label"</span><span class="p">,</span>
                          <span class="s2">"elementType"</span><span class="p">:</span> <span class="s2">"labels.text.stroke"</span><span class="p">,</span>
                          <span class="s2">"stylers"</span><span class="p">:</span> <span class="p">{</span>
                              <span class="s2">"color"</span><span class="p">:</span> <span class="s2">"#444444"</span><span class="p">,</span>
                              <span class="s2">"visibility"</span><span class="p">:</span> <span class="s2">"on"</span>
                          <span class="p">}</span>
                      <span class="p">}</span>
     	    		<span class="p">]</span>
     	    	<span class="p">}</span>
  		<span class="p">},</span>
  		<span class="p">...</span>
	<span class="p">}</span>
</code></pre>
</div>

<p>实现效果如下图：</p>

<p><img src="http://echarts.baidu.com/blog/images/post/2016-06-13-bmap-3.png" alt="百度地图3" /></p>

<p>除了上述四个配置，其他地图设置都可以通过 <a href="http://lbsyun.baidu.com/index.php?title=jspopular">百度地图提供的API</a> 实现</p>

<p>获取百度地图实例的方法如下：</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">bmap</span> <span class="o">=</span> <span class="nx">bmapCharts</span><span class="p">.</span><span class="nx">getModel</span><span class="p">().</span><span class="nx">getComponent</span><span class="p">(</span><span class="s1">'bmap'</span><span class="p">).</span><span class="nx">getBMap</span><span class="p">();</span> <span class="c1">// 百度地图实例</span>

</code></pre>
</div>

<p>例如，我们可以为地图添加一个缩放控件和一个比例尺：</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="nx">bmap</span><span class="p">.</span><span class="nx">addControl</span><span class="p">(</span><span class="k">new</span> <span class="nx">BMap</span><span class="p">.</span><span class="nx">NavigationControl</span><span class="p">());</span> <span class="c1">// 缩放控件</span>
<span class="nx">bmap</span><span class="p">.</span><span class="nx">addControl</span><span class="p">(</span><span class="k">new</span> <span class="nx">BMap</span><span class="p">.</span><span class="nx">ScaleControl</span><span class="p">());</span> <span class="c1">// 比例尺</span>

</code></pre>
</div>

<p><img src="http://echarts.baidu.com/blog/images/post/2016-06-13-bmap-4.png" alt="百度地图4" /></p>


      <div class="entry-meta">
        <span class="tag-panel">
          
          <!--<a href="http://echarts.baidu.com/blog/tags/#地图" title="Pages tagged 地图" class="tag">-->
            <span class="term">地图</span>
          <!--</a>-->
          
          
          <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
            <span class="term">教程</span>
          <!--</a>-->
          
          
        </span>
      </div>

      
    </div><!-- /.entry-content -->
    
    <div class="container">
  <div class="read-more">
    <h3>更多相关信息</h3>
    <div class="row">
      
      
      
      
      
      <div class="col-md-4">
        <div class="read-more-post">
          <h4><a href="http://echarts.baidu.com/blog/2017/06/14/building-realistic-map-with-echarts-gl.html" title="在 ECharts GL 中绘制三维地图">在 ECharts GL 中绘制三维地图</a></h4>
          <p>ECharts 前段时间发布了超亮眼的 GL，相对于之前已经圈粉无数的 ECharst-X 而言，ECharst GL 更是帅到爆，无论是性能、颜值、类型都有了巨大的飞跃。但是不是更易上手呢？答案是肯定的，用户除了能够根据数据画出诸如三维地图等三维的可视化图之外，只需要在项目中加入几个简单的配置项，就能配制出想要的风格的高质量画面效果。</p>
          <div class="tag-panel">
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#地图" title="Pages tagged 地图" class="tag">-->
              <span class="term">地图</span>
            <!--</a>-->
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
              <span class="term">教程</span>
            <!--</a>-->
            
          </div>
        </div>
      </div>
      
      
      
      
      
      <div class="col-md-4">
        <div class="read-more-post">
          <h4><a href="http://echarts.baidu.com/blog/2017/05/25/new-release.html" title="ECharts v3.6 发布：自定义系列、极坐标柱状图">ECharts v3.6 发布：自定义系列、极坐标柱状图</a></h4>
          <p>在 ECharts 新发布的 3.6 版本中，新增了自定义系列，能让用户定制渲染逻辑，从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。</p>
          <div class="tag-panel">
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#地图" title="Pages tagged 地图" class="tag">-->
              <span class="term">地图</span>
            <!--</a>-->
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
              <span class="term">教程</span>
            <!--</a>-->
            
          </div>
        </div>
      </div>
      
      
      
      
      
      <div class="col-md-4">
        <div class="read-more-post">
          <h4><a href="http://echarts.baidu.com/blog/2017/05/09/echarts-statistical-extension-tutorial.html" title="ECharts 统计扩展教程">ECharts 统计扩展教程</a></h4>
          <p>你是否想了解一组样本数据的分布情况？你是否想根据用户的数值属性将用户分成不同的群体？你是否想预测两个变量的变化趋势？——什么？不需要？不要再违心了，小编已经听到来自你们内心深处的呐喊，今天就为大家推荐一款神器——ECharts 统计扩展，这是一个用来进行数据分析的扩展工具，包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合，可以使大家方便地实现可视分析，也就是将数据分析的结果，通过可视化直观地呈现出来。</p>
          <div class="tag-panel">
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#地图" title="Pages tagged 地图" class="tag">-->
              <span class="term">地图</span>
            <!--</a>-->
            
            <!--<a href="http://echarts.baidu.com/blog/tags/#教程" title="Pages tagged 教程" class="tag">-->
              <span class="term">教程</span>
            <!--</a>-->
            
          </div>
        </div>
      </div>
      
      
      
        
    </div>
  </div>
</div>

  </article>
</div><!-- /#main -->

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-4 logo"><img src="http://echarts.baidu.com/images/echarts-footer-logo.png"/></div>
            <div id="efe-product" class="col-md-2 col-sm-4 pc">
                <h3>百度EFE更多产品</h3>
                <ul id="efe-product">
                    <li><a href="http://tushuo.baidu.com/?fr=echarts" target="_blank">图说</a></li>
                    <li><a href="https://ecomfe.github.io/san/?fr=echarts" target="_blank">SAN</a></li>
                    <li><a href="http://ecomfe.github.io/edp/?fr=echarts" target="_blank">EDP</a></li>
                    <li><a href="http://github.com/ecomfe/zrender/?fr=echarts" target="_blank">ZRender</a></li>
                    <li><a href="http://fecs.baidu.com/?fr=echarts" target="_blank">FECS</a></li>
                    <li><a href="http://ecomfe.github.io/fontmin/?fr=echarts" target="_blank">Fontmin</a></li>
                </ul>
            </div>
            <div class="col-md-3 col-md-offset-1 col-sm-4 pc">
                <h3>友情链接</h3>
                <ul>
                    <li><a href="https://fex.baidu.com/?fr=echarts" target="_blank">FEX</a></li>
                    <li><a href="http://bit.baidu.com/?fr=echarts" target="_blank">百度技术学院</a></li>
                    <li><a href="https://git.oschina.net/echarts/echarts?fr=echarts" target="_blank">码云镜像</a></li>
                </ul>
            </div>
            <div class="col-md-3" id="footer-icon-panel">
                <div class="icon-panel">
                    <a href="mailto:echarts@baidu.com" class="footer-icon">
                        <img src="http://echarts.baidu.com/images/icon-email.png"/>
                    </a>
                    <a href="https://twitter.com/EChartsJs" class="footer-icon">
                        <img src="http://echarts.baidu.com/images/icon-twitter.png"/>
                    </a>
                    <a href="http://weibo.com/u/5160877841" class="footer-icon">
                        <img src="http://echarts.baidu.com/images/icon-weibo.png"/>
                    </a>
                    <a href="https://github.com/ecomfe/echarts" class="footer-icon">
                        <img src="http://echarts.baidu.com/images/icon-github.png"/>
                    </a>
                </div>
                <div id="echarts-copyright">&#9400; 2017 百度ECharts团队出品</div>
            </div>
        </div>
    </div>
</footer>


<script src="http://echarts.baidu.com/blog/assets/js/vendor/jquery-1.9.1.min.js"></script>
<script src="http://echarts.baidu.com/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="http://echarts.baidu.com/blog/assets/js/scripts.min.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>



</body>
</html>
